博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
阅读量:5016 次
发布时间:2019-06-12

本文共 22687 字,大约阅读时间需要 75 分钟。

使用Jquery+EasyUI 进行框架项目开发案例讲解之三

角色管理源码分享 

  在上两篇文章

  

我们分享了使用Jquery EasyUI来进行UI布局等开发的相关方法,也许你在使用EasyUI的过程过更熟练,有更方便快捷的技巧,我强烈建议你可以分享出来,大家共同进步、共同学习,谢谢!

接下来我分享“角色管理”模块主要的核心代码,角色管理主界面如下图所示:

首先是角色管理的UI界面aspx代码如下:

 

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RoleAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.RoleAdmin" %>
<%=base.BuildToolBarButtons() %>   角色分类: 
  
查询

绑定当前登录用户所拥有的功能按钮列表代码如下:

 

 

/// /// 获得页面的权限/// private void GetPermission(){               this.permissionAdd = this.IsAuthorized("RoleManagement.Add");    this.permissionEdit = this.IsAuthorized("RoleManagement.Edit");    this.permissionExport = this.IsAuthorized("RoleManagement.Export");    this.permissionDelete = this.IsAuthorized("RoleManagement.Delete");    this.permissionRoleUser = this.IsAuthorized("RoleManagement.RoleUser");}/// /// 加载工具栏/// /// 
工具栏HTML
public override string BuildToolBarButtons(){ StringBuilder sb = new StringBuilder(); string linkbtn_template = "{4}"; sb.Append("刷新 "); sb.Append("
"); sb.Append(string.Format(linkbtn_template, "add", "icon-group-add", permissionAdd ? "" : "disabled=\"True\"", "新增角色", "新增")); sb.Append(string.Format(linkbtn_template, "edit", "icon-group_edit", permissionEdit ? "" : "disabled=\"True\"", "修改选中角色", "修改")); sb.Append(string.Format(linkbtn_template, "del", "icon-group_delete", permissionDelete ? "" : "disabled=\"True\"", "删除选中角色", "删除")); sb.Append("
"); sb.Append(string.Format(linkbtn_template, "roleuser", "icon-group_link", permissionRoleUser ? "" : "disabled=\"True\"", "设置当前角色拥有的用户", "用户")); return sb.ToString(); }private void InitGrid(){ this.DTRole = base.GetRoleScope(this.PermissionItemCode); this.gvRoleList.DataSource = this.DTRole; this.gvRoleList.DataBind();}

核心业务逻辑完整JS代码如下:

 

 

$(function () {    addRole();    editRole();    delRole();    $('#a_edit').click(function () {        if ($(this).linkbutton('options').disabled == true) {            return;        }        var i = $('table').data('tr_index');        if (i > -1)            $('.grid2 tr').eq(i).find("a[rel='edit']").click();        else            top.$('#notity').jnotifyAddMessage({ text: '请选择要编辑的数据.', permanent: false, type: 'warning' });    });    $('#a_del').click(function () {        if ($(this).linkbutton('options').disabled == true) {            return;        }        var i = $('table').data('tr_index');        if (i > -1)            $('.grid2 tr').eq(i).find("a[rel='delete']").click();        else            top.$('#notity').jnotifyAddMessage({ text: '请选择要删除的数据.', permanent: false, type: 'warning' });    });    $('#a_roleuser').click(function () {        if ($(this).linkbutton('options').disabled == true) {            return;        }        var i = $('table').data('tr_index');        if (i > -1)            $('.grid2 tr').eq(i).find("a[rel='setuser']").click();        else            top.$('#notity').jnotifyAddMessage({ text: '请选择要添加用户的角色.', permanent: false, type: 'warning' });    });    $('#a_refresh').click(function () {        window.location = 'RoleAdmin.aspx';    });    using('linkbutton', function () {        $('#a_roleuser').linkbutton({ text: "成员" });    });    accreditUsers(); //授权角色包含的用户    searchUser();    $('#txtCategory').combobox({        onChange: function (newValue, oldValue) {            $("#hidrolecategory").val(newValue)         }    })});function scripthtmlStr() {    var html = '
' html += '角色编号:
'; html += '角色名称:
'; html += '角色分类:
'; html += '有效性:   注:选中则启用该角色。
'; html += '角色描述: </td></tr>'; html += '</table></form>'; return html;}function searchUser() { $('#a_search').click(function () { var vValue = $('#txtCategory').combobox('getValue') + '|' + $('#txtCategory').combobox('getText'); top.$('#notity').jnotifyAddMessage({ text: vValue, permanent: false }); });}function addRole() { $('#a_add').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } top.$('#w').hWindow({ title: '新增角色', iconCls: 'icon-group-add', width: 450, height: 320, html: scripthtmlStr(), submit: function () { top.$('#txtCode').validatebox(); top.$('#txtRealName').validatebox(); top.$('#txtCategory').validatebox(); var $txtrolecode = top.$('#txtCode'); var $txtrolename = top.$('#txtRealName'); var enabledSelected = top.$("#chkEnabled").attr("checked"); var $txtdescription = top.$('#txtDescription'); var vcategory = top.$('#txtCategory').combobox('getValue'); if ($txtrolename.val() != '') { $.ajaxtext('handler/RoleAdminHandler.ashx?t=' + Math.random(), 'action=add&rolecode=' + $txtrolecode.val() + '&rolename=' + $txtrolename.val() + '&category=' + vcategory + '&enabled=' + enabledSelected + '&description=' + $txtdescription.val(), function (msg) { if (msg == '1') { top.$('#notity').jnotifyAddMessage({ text: '新增角色成功。', permanent: false }); top.$('#w').window('close'); window.location = 'RoleAdmin.aspx'; } else { alert(msg); return false; } }) } else { top.$('#notity').jnotifyAddMessage({ text: '请输入角色名称.', permanent: false }); top.$('#txtRealName').focus(); } return false; } }); bindCategory(); top.$('#txtCode').focus(); top.$('#chkEnabled').attr("checked", true); });}function editRole() { $("a[rel='edit']").click(function () { if ($('#a_edit').linkbutton('options').disabled == true) { return; } var id = $(this).attr('rid'); var roleCategory = $(this).attr('roleCategory'); var tds = $(this).parent().siblings(); top.$('#w').hWindow({ title: '编辑角色信息', iconCls: 'icon-group_edit', width: 450, height: 320, html: scripthtmlStr(), submit: function () { var $txtrolecode = top.$('#txtCode'); var $txtrealname = top.$('#txtRealName'); var enabledSelected = top.$("#chkEnabled").attr("checked"); var $txtdescription = top.$('#txtDescription'); var vcategory = top.$('#txtCategory').combobox('getValue'); if ($txtrealname.validatebox('isValid')) { $.ajaxtext('handler/RoleAdminHandler.ashx?n=' + Math.random(), 'action=edit&rolecode=' + $txtrolecode.val() + '&rolename=' + $txtrealname.val() + '&category=' + vcategory + '&enabled=' + enabledSelected + '&description=' + $.trim($txtdescription.val()) + '&roleid=' + id, function (msg) { if (msg == '1') { top.$('#notity').jnotifyAddMessage({ text: '角色信息修改成功.', permanent: false }); top.$('#w').window('close'); window.location = 'RoleAdmin.aspx'; } else { alert(msg); return false; } }) } } }); top.$('#txtRealName').validatebox(); top.$('#txtCode').val(tds.eq(1).html().replace(' ', '')); top.$('#txtRealName').val(tds.eq(2).html().replace(' ', '')); //top.$('#txtCategory').val(roleCategory); top.$('#chkEnabled').attr("checked", tds.eq(3).html().replace(' ', '') == "1"); top.$('#txtDescription').val(tds.eq(4).html().replace(' ', '')); bindCategory(); top.$('#txtCategory').combobox("setValue", roleCategory); })}function delRole() { $("a[rel='delete']").click(function () { if ($('#a_del').linkbutton('options').disabled == true) { return; } var rid = $(this).attr('rid'); if (rid != '') { $.messager.confirm('询问提示', '你确认删除当前所选角色吗?', function (data) { if (data) { $.ajax({ type: 'post', url: 'handler/RoleAdminHandler.ashx?t=<%=Guid.NewGuid().ToString() %>', data: 'action=delete&roleid=' + rid, beforeSend: function () { $.showLoading(); }, complete: function () { $.hideLoading(); }, success: function (msg) { if (msg == '1') { top.$('#notity').jnotifyAddMessage({ text: '角色删除成功.', permanent: false }); window.location = 'RoleAdmin.aspx'; } else top.$('#notity').jnotifyAddMessage({ text: '角色删除失败.', permanent: false, type: 'warning' }); } }); } }); } else { top.$('#notity').jnotifyAddMessage({ text: '请选择要删除的角色。', permanent: false, type: 'warning' }); } });}function bindCategory() { top.$('#txtCategory').combobox({ url: 'Modules/handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode=RoleCategory', method: 'get', valueField: 'ItemValue', textField: 'ItemName', editable: false, panelHeight: 'auto' });}var formHtml = '
角色名称
'; formHtml += '
描述:
'; formHtml += '
成员:
'; formHtml += ''; formHtml += '
添加'; formHtml += '
移除'; formHtml += '
清空
'var userList = '

    ';//授权用户function accreditUsers() { $("a[rel='setuser']").click(function () { if ($('#a_roleuser').linkbutton('options').disabled == true) { return; } var i = $('table').data('tr_index'); if (i == undefined) { top.$('#notity').jnotifyAddMessage({ text: '请选择角色.', permanent: false, type: 'warning' }); return false; } var tds = $('.grid2 tr:eq(' + i + ') td'); var rid = tds.eq(0).find(':hidden').val(); //rid = $(this).attr('rid'); top.$('#w').hWindow({ html: formHtml, width: 500, height: 400, title: '角色用户', iconCls: 'icon-group_link', submit: function () { var users = new Array(); var count = top.$('#user_groups').get(0).options.length; for (var i = 0; i < count; i++) { users.push(top.$('#user_groups').get(0).options[i].value); } $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=setusers&users=' + users + '&roleid=' + rid, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '设置成功。', permanent: false, type: 'message' }); } else alert(msg); top.$('#w').window('close'); }); return false; } }); top.$('a.easyui-linkbutton').linkbutton({ disabled: false }); top.$('#role_name').text(tds.eq(2).text()); top.$('#txtroleremark').val(tds.eq(4).text()); $.getJSON('handler/RoleAdminHandler.ashx?n=' + Math.random(), '&action=usersinrole&roleid=' + rid, function (json) { $.each(json, function (i, n) { top.$('#user_groups').append(''); }); }); top.$('#group_add').click(function () { top.$('#d').hDialog({ html: userList, title: '选取用户', iconCls: 'icon-users', width: 800, height: 600, submit: function () { var selectedUids = ''; top.$('#sp :checked').each(function () { //匹配所有sp中被选中的元素(checkbox中被选中的) if (top.$(this).is(':checked')) selectedUids += top.$(this).val() + ','; }); if (selectedUids != '') selectedUids = selectedUids.substr(0, selectedUids.length - 1); if (selectedUids.length == 0) { $.messager.alert('请至少选择一个用户!', msg, 'warning'); return false; } else { var users = top.$('#sp').data('allusers'); var selarr = getSelectedUsers(users, selectedUids); top.$('#user_groups').empty(); top.$('#sp').removeData('allusers'); $.each(selarr, function (i, n) { top.$('#user_groups').append(''); }); top.$('#d').dialog("close"); } } }); var lis = ''; $.getJSON('handler/UserAdminHandler.ashx?n=' + Math.random(), '', function (json) { $.each(json, function (i, n) { lis += '
  • '; }); top.$('.ul_users').empty().append(lis); top.$('#sp').data('allusers', json); }); top.$('#labchkall').click(function () { var flag = $(this).prev().is(':checked'); var pers = $(this).parent().parent().prev(); if (!flag) { top.$(":checkbox", '#sp').attr("checked", true); } else { top.$(":checkbox", '#sp').attr("checked", false); } }); }); top.$('#group_delete').click(function () { var i = top.$('#user_groups').get(0).selectedIndex; if (i > -1) { var uid = top.$('#user_groups option:selected').val(); //选中的值或 top.$("#user_groups").find("option:selected").val(); var uname = top.$('#user_groups option:selected').text(); //选中的文本 或top.$("#user_groups").find("option:selected").text(); top.$('#user_groups').get(0).remove(i); $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=removeuserfromrole&uid=' + uid + '&roleid=' + rid, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '移除成功。', permanent: false, type: 'message' }); } else { top.$.messager.alert('提示信息', msg, 'warning'); } }); } else { top.$.messager.alert("操作提示", "请选择要移除的用户!", "info"); } }); top.$('#group_clear').click(function () {// var count = $("#user_groups option").length// if (count <= 0) {// top.$.messager.alert("操作提示", "当前角色没有用户!", "info");// return;// } top.$.messager.confirm('询问提示', '确认要清除所有用户吗?', function (data) { if (data) { top.$('#user_groups').empty(); } }); return false; }); });}function getSelectedUsers(users, selecedVals) { var arrUserid = eval('[' + selecedVals + ']'); var arr = new Array(); $.each(users, function (i, n) { if ($.inArray(n.Id, arrUserid) > -1) arr.push(n); }); return arr;}

     

    角色添加界面如下:

     

     

     

    角色修改界面:

     

     

    角色用户设置界面:

     

     

             在上图中,我们可以添加、移除、清空当前角色包含的用户。

      选择添加,打开“选取用户”窗口,如下图所示:

            

    角色用户设置及用户选择界面JS代码如下:

     

    var formHtml = '
    角色名称
    '; formHtml += '
    描述:
    '; formHtml += '
    成员:
    '; formHtml += ''; formHtml += '
    添加'; formHtml += '
    移除'; formHtml += '
    清空
    'var userList = '

      ';//授权用户function accreditUsers() { $("a[rel='setuser']").click(function () { if ($('#a_roleuser').linkbutton('options').disabled == true) { return; } var i = $('table').data('tr_index'); if (i == undefined) { top.$('#notity').jnotifyAddMessage({ text: '请选择角色.', permanent: false, type: 'warning' }); return false; } var tds = $('.grid2 tr:eq(' + i + ') td'); var rid = tds.eq(0).find(':hidden').val(); //rid = $(this).attr('rid'); top.$('#w').hWindow({ html: formHtml, width: 500, height: 400, title: '角色用户', iconCls: 'icon-group_link', submit: function () { var users = new Array(); var count = top.$('#user_groups').get(0).options.length; for (var i = 0; i < count; i++) { users.push(top.$('#user_groups').get(0).options[i].value); } $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=setusers&users=' + users + '&roleid=' + rid, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '设置成功。', permanent: false, type: 'message' }); } else alert(msg); top.$('#w').window('close'); }); return false; } }); top.$('a.easyui-linkbutton').linkbutton({ disabled: false }); top.$('#role_name').text(tds.eq(2).text()); top.$('#txtroleremark').val(tds.eq(4).text()); $.getJSON('handler/RoleAdminHandler.ashx?n=' + Math.random(), '&action=usersinrole&roleid=' + rid, function (json) { $.each(json, function (i, n) { top.$('#user_groups').append(''); }); }); top.$('#group_add').click(function () { top.$('#d').hDialog({ html: userList, title: '选取用户', iconCls: 'icon-users', width: 800, height: 600, submit: function () { var selectedUids = ''; top.$('#sp :checked').each(function () { //匹配所有sp中被选中的元素(checkbox中被选中的) if (top.$(this).is(':checked')) selectedUids += top.$(this).val() + ','; }); if (selectedUids != '') selectedUids = selectedUids.substr(0, selectedUids.length - 1); if (selectedUids.length == 0) { $.messager.alert('请至少选择一个用户!', msg, 'warning'); return false; } else { var users = top.$('#sp').data('allusers'); var selarr = getSelectedUsers(users, selectedUids); top.$('#user_groups').empty(); top.$('#sp').removeData('allusers'); $.each(selarr, function (i, n) { top.$('#user_groups').append(''); }); top.$('#d').dialog("close"); } } }); var lis = ''; $.getJSON('handler/UserAdminHandler.ashx?n=' + Math.random(), '', function (json) { $.each(json, function (i, n) { lis += '
    • '; }); top.$('.ul_users').empty().append(lis); top.$('#sp').data('allusers', json); }); top.$('#labchkall').click(function () { var flag = $(this).prev().is(':checked'); var pers = $(this).parent().parent().prev(); if (!flag) { top.$(":checkbox", '#sp').attr("checked", true); } else { top.$(":checkbox", '#sp').attr("checked", false); } }); }); top.$('#group_delete').click(function () { var i = top.$('#user_groups').get(0).selectedIndex; if (i > -1) { var uid = top.$('#user_groups option:selected').val(); //选中的值或 top.$("#user_groups").find("option:selected").val(); var uname = top.$('#user_groups option:selected').text(); //选中的文本 或top.$("#user_groups").find("option:selected").text(); top.$('#user_groups').get(0).remove(i); $.ajaxtext('handler/RoleAdminHandler.ashx', 'action=removeuserfromrole&uid=' + uid + '&roleid=' + rid, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '移除成功。', permanent: false, type: 'message' }); } else { top.$.messager.alert('提示信息', msg, 'warning'); } }); } else { top.$.messager.alert("操作提示", "请选择要移除的用户!", "info"); } }); top.$('#group_clear').click(function () {// var count = $("#user_groups option").length// if (count <= 0) {// top.$.messager.alert("操作提示", "当前角色没有用户!", "info");// return;// } top.$.messager.confirm('询问提示', '确认要清除所有用户吗?', function (data) { if (data) { top.$('#user_groups').empty(); } }); return false; }); });}

      特别说明一下,在选取用户界面,使用的是checkbox控件,得到选中的checkbox,是使用下面的实例代码:

      $("#checkbox1").is(":checked") // true$("#checkbox2").is(":checked") // false//注意不是使用下面的方法$("#checkbox1").attr("checked") // checked$("#checkbox2").attr("checked") // undefined

       

       

      角色管理一般处理程序如下:

       

      相关资源分享 

       

      作者: 出处: Email: QQ 交流:406590790 QQ群:16653241平台博客:   【CSDN】         【CNBLOGS】关于作者:高级工程师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案,多年项目开发与管理经验,曾多次组织并开发多个大型项目,精通DotNet,DB(SqlServer、Oracle等)技术。熟悉Java、Delhpi及Linux操作系统,有扎实的网络知识。在面向对象、面向服务以及数据库领域有一定的造诣。现从事DB管理与开发、WinForm、WCF、WebService、网页数据抓取以及ASP.NET等项目管理、开发、架构等工作。如有问题或建议,请多多赐教!本文版权归作者和CSDN博客共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过邮箱或QQ 联系我,非常感谢。

       

       

       

       

       

       

       

       

       

      转载于:https://www.cnblogs.com/james1207/p/3366234.html

      你可能感兴趣的文章
      Android 自定义View (三) 圆环交替 等待效果
      查看>>
      设置虚拟机虚拟机中fedora上网配置-bridge连接方式(图解)
      查看>>
      HEVC播放器出炉,迅雷看看支持H.265
      查看>>
      [置顶] Android仿人人客户端(v5.7.1)——人人授权访问界面
      查看>>
      Eclipse 调试的时候Tomcat报错启动不了
      查看>>
      【安卓5】高级控件——拖动条SeekBar
      查看>>
      ES6内置方法find 和 filter的区别在哪
      查看>>
      Android入门之文件系统操作(二)文件操作相关指令
      查看>>
      Android实现 ScrollView + ListView无滚动条滚动
      查看>>
      Swift 中的指针使用
      查看>>
      Swift - 使用闭包筛选过滤数据元素
      查看>>
      alue of type java.lang.String cannot be converted to JSONObject
      查看>>
      搜索引擎选择: Elasticsearch与Solr
      查看>>
      JAVA设计模式之简单工厂模式与工厂方法模式
      查看>>
      ③面向对象程序设计——封装
      查看>>
      【19】AngularJS 应用
      查看>>
      Spring
      查看>>
      Linux 系统的/var目录
      查看>>
      Redis学习---Redis操作之其他操作
      查看>>
      WebService中的DataSet序列化使用
      查看>>